<template>
    <div>
        <el-dialog v-model="dialogVisible" width="700" align-center title="添加工作站" :before-close="handleClosed">
            <el-form>
                <el-row>
                    <el-row>
                        <el-form-item label="工作站编号">
                            <el-input :disabled="isRandom" style="width: 193px"
                                      v-model="queryData.workerNumbering"></el-input>
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="点击生成随机编号"
                                    placement="top"
                            >
                                <el-switch v-model="isRandom">
                                    <template #active-action>
                                        <span class="custom-active-action">T</span>
                                    </template>
                                    <template #inactive-action>
                                        <span class="custom-inactive-action">F</span>
                                    </template>
                                </el-switch>
                            </el-tooltip>
                        </el-form-item>
                    </el-row>
                    <el-form-item label="工作站名称" label-width="115">
                        <el-input v-model="queryData.name"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="工作站地点">
                        <el-input v-model="queryData.address"></el-input>
                    </el-form-item>
                    <el-form-item label="所在车间" label-width="155">
                        <el-select style="width: 150px" v-model="queryData.idWorkshop">
                            <template v-for="item in works">
                                <el-option :label="item.label" :value="item.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="所属工序" label-width="80">
                        <el-select style="width: 150px" v-model="queryData.idProgress">
                            <template v-for="item in pros">
                                <el-option :label="item.label" :value="item.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用" label-width="200">

                        <el-radio-group v-model="queryData.status">
                            <el-radio :value="1" border>启用</el-radio>
                            <el-radio :value="0" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="queryData.comments"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: center">
                <el-button type="primary" @click="handleSave">确 定</el-button>
                <el-button @click="handleClosed">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import workAPI from "@/util/request-md/work/work.js";
import rulesAPI from "@/util/request-md/rules/rules.js"
export default {
    emits: ['callClosed', 'callSaveSuccess'],
    props: ['visible', 'workshops', 'progress'],
    name: "MakeWorkDialog",
    data() {
        return {
            queryData: {
                workerNumbering: '',
                name: '',
                comments: '',
                address: '',
                status: 0,
                idWorkshop: '0',
                idProgress: '0',
            },
            works: [],
            isRandom: false,
            pros: [],
            dialogVisible: false
        }
    },
    watch: {
        'visible'(val) {
            this.works = this.workshops;
            this.pros = this.progress;
            this.dialogVisible = val;
            this.queryData.idWorkshop = this.workshops[0].value;
            this.queryData.idProgress = this.progress[0].value;
        },
        'isRandom'(val){
            console.log(val,"发生了改变");
            if(val){
                rulesAPI.getEncoding({rulesName: "WORK_NO"},res=>{
                    this.queryData.workerNumbering = res.data;
                })
            }else{
                this.queryData.workerNumbering = '';
            }
        }
    },
    methods: {
        handleSave() {
            this.save();
            this.$emit('callClosed');
        },
        handleClosed() {
            this.$emit('callClosed');
        },
        save() {
            workAPI.addWork(this.queryData, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.queryData = {
                        workerNumbering: '',
                        name: '',
                        comments: '',
                        address: '',
                        status: 0,
                        idWorkshop: '0',
                        idProgress: '0',
                    }
                    this.$emit('callSaveSuccess');
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        }
    }
}
</script>

<style scoped>

</style>